<template>
    <div class="liBorder">
        <el-row>
            <h2 class="textCenter bgColor" style="display:block">文章贡献榜</h2>
            <ul>
                <li>
                    <span style="paddingLeft:10px"><strong>姓名</strong></span>
                    <span class="floatRi"><strong>文章数目</strong></span>
                </li>
                <li v-for="item in items" :key="item.num">
                    <span>{{item.num}}.</span>
                    <span>{{item.name}}</span>
                    <span class="floatRi">{{item.grade}}</span>
                </li>
            </ul>
            <el-menu router class="el-menu-demo" mode="horizontal">
                <!-- 登录才能在线知识竞答改为可直接参与知识竞答 -->
                <!-- <el-menu-item @click="isLogin"><h1 class="textCenter bgColor">立即参赛</h1></el-menu-item></el-menu>
                <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <span>参赛需先登录,是否登录?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false;toLogin()">确 定</el-button>
                </span>
                </el-dialog> -->
                <router-link to="/game"><h1 class="textCenter bgColor">编写文章</h1></router-link></el-menu>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'rankingList',
    data() {
        return {
            dialogVisible: false,
            items:[
                {
                    num: 1,
                    name: '',
                    grade: ''
                },
                {
                    num: 2,
                    name: '',
                    grade: ''
                },
                {
                    num: 3,
                    name: '',
                    grade: ''
                },
                {
                    num: 4,
                    name: '',
                    grade: ''
                },
                {
                    num: 5,
                    name: '',
                    grade: ''
                },
                {
                    num: 6,
                    name: '',
                    grade: ''
                },
                {
                    num: 7,
                    name: '',
                    grade: ''
                },
                {
                    num: 8,
                    name: '',
                    grade: ''
                },
                {
                    num: 9,
                    name: '',
                    grade: ''
                },
                {
                    num: 10,
                    name: '',
                    grade: ''
                },
            ]
        }
    },
    created() {
        this.getRankingIn();
    },
    methods:{
        //获取排行榜
        getRankingIn(){
            axios.post("http://localhost:8080/game/ranking")
            .then((res)=>{
                for(var i=0;i<10;i++){
                    this.items[i].name=res.data.rankList[i].name;
                    this.items[i].grade=res.data.rankList[i].score;
                }
            })
            .catch((error)=>{
                console.log(error.data.msg);
            })
        },
        //不进行知识竞答
        // handleClose(done) {
        // this.$confirm('确定退出？')
        //   .then(_ => {
        //       done();
        //   })
        //   .catch(_ => {});
        // },
        // 是否为登录状态
        // isLogin(){
        //     if(localStorage.getItem("token")!=null){
        //         this.$router.push("/game");
        //     }else{
        //         this.dialogVisible=true;
        //     }
        // },
        //不是登录状态跳转至登录界面
        // toLogin(){
        //     this.$router.push('/login');
        // }
    }
}
</script>
<style scoped>
.floatRi{
    float: right;
    padding-right: 10px;
}
.bgColor{
    background-color: #98e778;
    text-decoration: underline;        
}
li>span{
    font-weight: bold;
    font-size: 12px;
    line-height: 26px;
    color: #14a53b;
}
.liBorder{
    border: solid 1px #d4f9c5;
}
.el-menu--horizontal>.el-menu-item{
    width: 100%;
    padding: 0;
}
</style>